<template>
	<view>
		<view class="foot-top">银行卡</view>
		<view class="content" :style="{ height: contentHeight }">
			<view class="title">我的银行卡</view>
			<view class="myCards" v-if="cards.length > 0">
				<view v-for="(item,index) in cards" :key="index" :style="{height: cardHeight }">
					<view class="box" :style="{'background-color':item.backgroundColor}">
						<view class="cardIcon" :style="{'background-image':'url('+item.iconURL+')'}"></view>
						<view class="card">
							<view class="cardName">{{item.name}}</view>
						</view>
						<view class="cardNum">{{item.num}}</view>
						<view class="close" @tap="removeCard(item.cardId)"></view>
					</view>
				</view>
			</view>
			
<!-- 			<view class="myCards" v-if="cards.length == 0">
				<view class="noCard">无银行卡</view>
			</view> -->
			
			<view class="addCard" @tap="toAddCard">
				<view>添加其他银行卡</view>
			</view>
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/index.wxs"></script>
<script>
const http = require('../../utils/http.js')
const util = require('../../utils/util')
export default{
	data() {
	  return {
			userId: 0,
			
			isOpenWindow: false,
			
			cards:[
				// {
				// 	name: "建设银行卡",
				// 	backgroundColor: "rgba(34, 141, 223, 1.0)",
				// 	iconURL: "../../static/images/ChinaConstructionBank.png",
				// 	num: "**** 5995",
				// 	id: "11111111"
				// },
				// {
				// 	name: "农业银行卡",
				// 	backgroundColor: "rgba(94, 179, 155, 1.0)",
				// 	iconURL: "../../static/images/AgriculturalBankOfChina.png",
				// 	num: "**** 5995",
				// },
				// {
				// 	name: "工商银行卡",
				// 	backgroundColor: "rgba(207, 59, 61, 1.0)",
				// 	iconURL: "../../static/images/IndustrialAndCommercialBank.png",
				// 	num: "**** 5995",
				// },
				// {
				// 	name: "中国银行卡",
				// 	backgroundColor: "rgba(198, 14, 17, 1.0)",
				// 	iconURL: "../../static/images/BankOfChina.png",
				// 	num: "**** 5995",
				// },
				// {
				// 	name: "招商银行卡",
				// 	backgroundColor: "rgba(198, 24, 39, 1.0)",
				// 	iconURL: "../../static/images/ChinaMerchantsBank.png",
				// 	num: "**** 5995",
				// }
			]
	  }
	},
	computed: {
    contentTop() {
			var top = 50 - this.cards.length * 4;
      return `${top}vh`;
    },
    contentHeight() {
      return `${this.cards.length * 10 + 12}vh`;
    },
		titleFlex(){
			var flex = ( 4 / ( this.cards.length * 6 + 8 ) ) * 10;
			return `${flex} 0 0`;
		},
		cardsFlex(){
			var flex = ( ( this.cards.length * 6 ) / ( this.cards.length * 6 + 8 ) ) * 10 ;
			return `${flex} 0 0`;
		},
		addCardFlex(){
			var flex = ( 4 / ( this.cards.length * 6 + 8 ) ) * 10;
			return `${flex} 0 0`;
		},
		cardHeight(){
			var height = 10;
      return `${height}vh`;
		}
	},
  onLoad: function(options) {
		if (options.userId) {
			this.userId = options.userId;
		}
  },
  onShow: function() {
		this.getCards();
  },
	methods: {
		getCards() {
		  uni.showLoading()
		  const params = {
		    url: '/mall4cloud_user/m/userCards/get',
		    method: 'GET',
		    data: {
					userId: this.userId
				},
		    callBack: res => {
					console.log(res);
					if(res.length>0) {
						for (var i = 0; i < res.length; i++) {
							var name = res.[i].bank;
							switch (name){
								case "建设":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡",
										'backgroundColor': "rgba(34, 141, 223, 1.0)",
										'iconURL': "../../static/images/ChinaConstructionBank.png",
										'num': "**** " + res.[i].cardNum.toString().substring(15, 19),
										'cardId': res.[i].id
									});
									break;
								case "农业":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡",
										'backgroundColor': "rgba(94, 179, 155, 1.0)",
										'iconURL': "../../static/images/AgriculturalBankOfChina.png",
										'num': "**** " + res.[i].cardNum.toString().substring(15, 19),
										'cardId': res.[i].id
									});
									break;
								case "工商":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡",
										'backgroundColor': "rgba(207, 59, 61, 1.0)",
										'iconURL': "../../static/images/IndustrialAndCommercialBank.png",
										'num': "**** " + res.[i].cardNum.toString().substring(15, 19),
										'cardId': res.[i].id
									});
									break;
								case "中国":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡",
										'backgroundColor': "rgba(198, 14, 17, 1.0)",
										'iconURL': "../../static/images/BankOfChina.png",
										'num': "**** " + res.[i].cardNum.toString().substring(15, 19),
										'cardId': res.[i].id
									});
									break;
								case "招商":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡",
										'backgroundColor': "rgba(198, 24, 39, 1.0)",
										'iconURL': "../../static/images/ChinaMerchantsBank.png",
										'num': "**** " + res.[i].cardNum.toString().substring(15, 19),
										'cardId': res.[i].id
									});
									break;
								default:
									break;
							}
						}
					} 
					uni.hideLoading()
		    }
		  }
		  http.request(params)
		},
		removeCard(cardId) {
			console.log(cardId);
		  const params = {
		    url: '/mall4cloud_user/m/userCards/unbind',
		    method: 'POST',
		    data: {
					id: cardId
				}
		  }
		  http.request(params);
			// this.$set(this.cards,[]);
			this.cards = [];
			// this.getCards();
			setTimeout(this.getCards, 1000);
		},
		toAddCard() {
		  uni.navigateTo({
		    // url: '/pages/addCard/addCard'
		    url: '/pages/addCard/addCard?userId=' + this.userId
		  })
		}
	}
}
</script>

<style>
@import './creditCard.css';
</style>